//! 自定义
// tabbar
@tabbar-height: 64px;

// color
@page-bg-color: #FAFAFA;
@main-color: #2196f3;

//! vant
// Color Palette
@black: #000;
@white: #fff;
@gray-1: #f7f8fa;
@gray-2: #f2f3f5;
@gray-3: #ebedf0;
@gray-4: #dcdee0;
@gray-5: #c8c9cc;
@gray-6: #969799;
@gray-7: #646566;
@gray-8: #323233;
@red: #ff5a66;
@blue: @main-color;
@orange: #ffa217;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #2cc561;

// Gradient Colors
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);

// Component Colors
@text-color: @gray-8;
@active-color: @gray-2;
@active-opacity: 0.7;
@disabled-opacity: 0.5;
@background-color: @gray-1;
@background-color-light: #fafafa;
@text-link-color: #576b95;

// Padding
@padding-base: 4px;
@padding-xs: @padding-base * 2;
@padding-sm: @padding-base * 3;
@padding-md: @padding-base * 4;
@padding-lg: @padding-base * 6;
@padding-xl: @padding-base * 8;

// Font
@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-size-xl: 18px;
@font-size-2xl: 20px;
@font-weight-bold: 500;
@line-height-xs: 14px;
@line-height-sm: 18px;
@line-height-md: 20px;
@line-height-lg: 22px;
@base-font-family: "AlibabaPuHuiTi", "Microsoft Yahei", sans-serif;
@price-integer-font-family: "AlibabaPuHuiTi", "Microsoft Yahei", sans-serif;

// Animation
@animation-duration-base: 0.3s;
@animation-duration-fast: 0.2s;
@animation-timing-function-enter: ease-out;
@animation-timing-function-leave: ease-in;

// Border
@border-color: @gray-3;
@border-width-base: 1px;
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-max: 999px;

// Shadow
@box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),
  0px 8px 20px rgba(0, 0, 0, 0.08);
@box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
@box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
@box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),
  0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);

// DropdownMenu
@dropdown-menu-title-active-text-color: @blue;
@dropdown-menu-option-active-color: @blue;

// Cascader
@cascader-active-color: @blue;

// Tabs
@tabs-default-color: @blue;

// Dialog
@dialog-confirm-button-text-color: @blue;
@dialog-header-isolated-padding: 24px 15px;


.van-sticky--fixed {
  @apply bg-white shadow-sm;
}

.van-tabs__wrap {
  .van-tabs__nav {
    .van-tab {
      @apply text-lg;
    }

    .van-tab--active {
      @apply text-sky-500;
    }

    .van-tabs__line {
      @apply bg-sky-500;
    }
  }
}